// pages/todos/todos.js
Page({

  //版本1：todos的代码逻辑分析
  // 1.给input标签绑定一个input事件，时刻获取内容，并把它写入data里面的inputValue
  //2. 点击添加按钮，把data里面的inputValue的值,追加到数组list里面
  // 2.1 先把list从data里面拿出来
  // 2.2 list.push(数据)
  //   2.2.1 在追加之前先判断，任务是否已有，如已存在则不添加
  // 2.3 把追加完数据的list 通过this.setData写入data里面
  //3.点击icon删除小图标，对list数据进行删除
  // 3.1点击哪个小图标则删除哪个

  //版本2：todos的代码逻辑分析
  //0.先去本地获取数据，追加到 data的list里面，把数据渲染回页面 (做了2.4存储，再回来做)
  // 1.给input标签绑定一个input事件，时刻获取内容，并把它写入data里面的inputValue
  //2. 点击添加按钮，把data里面的inputValue的值,追加到数组list里面
  // 2.1 先把list从data里面拿出来
  // 2.2 list.push(数据)
  //   2.2.1 在追加之前先判断，任务是否已有，如已存在则不添加
  // 2.3 把追加完数据的list 通过this.setData写入data里面
  // 2.4把数据写入本地存储
  //3.点击icon删除小图标，对list数据进行删除
  // 3.1点击哪个小图标则删除哪个
  // 3.2把删除后的数据写入本地存储



  /**
   * 页面的初始数据
   */
  data: {
    userName: "",
    inputValue: "", //输入框的任务内容
    list: [] //数组里面存放的是任务
  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //onLoad里面可以接受页面跳转带来的参数
    console.log(options)
    //拿到页面跳转的参数，写入data
    this.setData({
      userName: options.userName
    })
    //console.log(this.data.inputValue)
    //如果出现 XX unified 则是this的指向没有指向本地的小程序 this出现在对象{} 不可以出现在嵌套里面，否则它的指向会出现以上的错误 
    //方式一 改变this的指向    bind call aplly
    // var _this=this
    //1.先去本地获取数据，追加到 data的list里面(做了存储，再回来做)
    //console.log(localStorage)
   wx.getStorage({
     key: 'todoList',
     //获取数据成功的回调函数
     success:(res)=> {
       //res就是你获取到数据
       console.log(res);
       //res.data里面才是我们才要的数组
       //方式二：箭头函数的this永远指向它的外层  改变this 的指向
       this.setData({
         list:res.data
       })
     },
     //获取失败的一个回调函数
     fail:function(res){
       console.log(res);
     }
   })
  },

  //handleInput的事件处理程序
  handleInput(e) {
    //时刻获取内容，并把它写入data里面的inputValue
    //console.log(e);
    var neirong = e.detail.value;
    //通过this.setData写入data
    this.setData({
      inputValue: neirong
    })
  },

  //给添加按钮绑定handleTap
  handleTap() {
    //bug2 return可以阻止代码的执行
    if (!this.data.inputValue) {
      wx.showToast({
        title: '输入的内容不能为空',
        icon: "none",
        duration: 2000
      })
      //this.data.inputValue为空的时候，阻止代码执行
      return;
    }
    /*版本一 
    //把data里面的inputValue的值,追加到数组list里面
    //console.log(this.data.inputValue)
    // 2.1 先把list从data里面拿出来
    var list=this.data.list;
    //push(在数组的最后插入一个元素) unshift pop shift indexOf(获取某个元素在数组的下标，如果这个元素不存在返回-1)
    //2.2 list.push(数据)
    //2.2.1 bug1在追加之前先判断，任务是否已有，如已存在则不添加
    if(list.indexOf(this.data.inputValue)==-1){
      list.push(this.data.inputValue);
    }
    //{键：值}es6：当键和值是一样的变量名时，可以简写为{变量}
    this.setData({
      list
    })
    */

    //版本二
    // 2.1 先把list从data里面拿出来
    var list = this.data.list;
    //2.2  创建一个Set对象，他是伪数组结构，他自己在内部过滤掉 重复数据 
    var set = new Set(list);
    //2.2.1
    //把数据追加到set里面，通过set 对象提供add方法
    set.add(this.data.inputValue);
    //console.log(set)
    //2.3把存储到data的list 
    this.setData({
      //...扩展运算符，把set每个元素取出，放到[]
      list: [...set]
    });
    // 2.4把数据写入本地存储
    wx.setStorage({
      key: "todoList",
      data: this.data.list
    })
    //把inputValue清空
    this.setData({
      inputValue:""
    })
  },

  //自定义删除图标，点击哪个删除哪个
  handleDelete(e) {
    //3.1点击哪个小图标则删除哪个
    //3.2获取小图标的自定义属性值
    var index = e.currentTarget.dataset.index;
    //3.3把数组获取出来
    var list = this.data.list;
    //3.4把数组对应的数据删除splice，从index位置开始，删除一个
    list.splice(index, 1)
    //把数据写入数组 
    this.setData({
      list
    })
    //3.5把数据写入本地存储 
    wx.getStorage({
      key: 'todoList',
      data:this.data.list
      })

  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})